<template>
  <a-tree-select
    allowClear
    :replaceFields="{ children: 'children', key: 'id', value: 'name' }"
    :style="{ width: '100%' }"
    :treeData="data"
    placeholder="请选择"
    searchPlaceholder="请输入"
    :showSearch="true"
    :treeCheckable="multiple"
    :default-checked-keys="default_checked_keys"
    :treeCheckStrictly="true"
    @change="change"
    v-model="value"
  >
    <span slot="title" slot-scope="{ id, name, scopedSlots }">
      <span v-if="id.substring(0, 7) === 'dept_id'">
        <a-icon type="team" />
      </span>
      <a-avatar v-else shape="square" :size="32" icon="user" :src="scopedSlots.avatar" />
      {{ name.substring(6) }}
    </span>
  </a-tree-select>
</template>
<script>
import { quyeryTreeData } from '@/api/base/ha_depart'

export default {
  name: 'treeSelect',
  props: {
    // 指定父节点
    departId: {
      type: Number,
      default: null,
    },
    defaultValue: {
      default: undefined,
    },
    // 是否显示人员
    type: {
      type: String,
      default: 'depart',
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.findTreeData()
  },
  data() {
    return {
      data: [], // 数据
      value: this.defaultValue,
      default_checked_keys: [], // 默认选中
    }
  },
  methods: {
    change(v, l, e) {
      console.log('111', v, l, e)
      let arr = []
      if (Array.isArray(v) && v.length > 0) {
        e.allCheckedNodes.forEach((node) => {
          let data = node.data.props
          let obj = {}
          if (this.type == 'depart') {
            obj.id = data.id
            obj.name = data.name
            obj.parentid = data.parentid
            obj.type = 'depart'
          } else {
            obj.id = data.id
            obj.name = data.name
            obj.parentid = data.parentid
            obj.avatar = data.scopedSlots.avatar
            obj.type = 'user'
          }
          arr.push(obj)
        })
      } else if (!Array.isArray(v) && v.length > 0) {
        let data = e.triggerNode.dataRef
        let obj = {}
        if (this.type == 'depart') {
          obj.id = data.id
          obj.name = data.name
          obj.parentid = data.parentid
          obj.type = 'depart'
        } else {
          obj.id = data.id
          obj.name = data.name
          obj.parentid = data.parentid
          obj.avatar = data.scopedSlots.avatar
          obj.type = 'user'
        }
        arr.push(obj)
      }
      console.log('arr', arr)
      this.$emit('treeChange', arr)
    },
    // 给树数据中的部门添加禁选属性
    renderTreeNodes(data) {
      const setData = data.map((item) => {
        if (item.id.substring(0, 7) === 'dept_id' && this.type == 'user') {
          item.disabled = true
          item.children && this.renderTreeNodes(item.children)
        }
        return item
      })
      return setData
    },
    // 查询树下拉的数据
    findTreeData() {
      quyeryTreeData({ parent: this.departId, type: this.type }).then((res) => {
        console.log('res', res)
        if (res.code === 0 && res.data) {
          this.data = this.renderTreeNodes(res.data)
        }
      })
    },
  },
}
</script>